<template>
  <div>
    <div id="viewerContainer"></div>
  </div>
</template>
<script lang="ts" setup>
import '@grapecity/ar-viewer/dist/jsViewer.min.js';
import '@grapecity/ar-viewer/dist/jsViewer.min.css';
import { Colgroup } from 'vxe-table';
import { ref, reactive, getCurrentInstance, onMounted, computed, toRefs, watch, defineProps } from 'vue';
let { proxy }: any = getCurrentInstance();
let win = window;
let viewer = null;
let reportParamter = reactive({}) as any;
let isShowParamPanel = ref(false);

defineExpose({ refreshRpt });

onMounted(() => {
  initViewer();
});

/**报告模板参数发生改变 */
function refreshRpt(rptObj) {
  Object.assign(reportParamter, rptObj);
  if (viewer) {
    reloadRpt();
  } else {
    setTimeout(() => {
      initViewer(() => {
        reloadRpt();
      });
    }, 300);
  }
}

function initViewer(callback = null) {
  if (viewer) {
    if (callback) {
      callback();
    }
    return;
  }
  viewer = new GrapeCity.ActiveReports.JSViewer.create({
    element: '#viewerContainer',
    reportService: {
      url: window.apiUrl.VUE_APP_PRINT_URL + '/api/reporting'
    },
    parametersPanel: {
      location: win.params.parametersPanel
    },
    action: (e, v) => {
      //ToDo
    },
    reportLoaded: (e) => {
      //ToDo
    },
    documentLoaded: (e) => {
      try {
        if (win.params && win.params.parametersPanel === 'left' && (isShowParamPanel || true)) {
          const btns = document.getElementsByClassName(
            'gc-btn gc-btn--block gc-btn--with-icon gc-btn--accent gc-size-lg'
          );
          for (const element of btns) {
            if (element.getAttribute('title') === '参数面板') {
              element.click();
            }
          }
          if (win.params.isOpenedparametersPanel && isShowParamPanel) {
            const pins = document.getElementsByClassName(
              'gc-btn gc-btn-pin gc-btn--block gc-btn--with-icon gc-btn--transparent'
            );
            for (const element of pins) {
              if (element.getAttribute('title') === 'Pin') {
                element.click();
              }
            }
          }
        } else if (win.params.parametersPanel === 'top') {
          const btns = document.getElementsByClassName(
            'gc-btn gc-btn--with-icon gc-btn--transparent gc-rounded'
          );
          for (const element of btns) {
            if (element.getAttribute('title') === '参数面板') {
              element.click();
            }
          }
        }
        if (callback) {
          callback();
        }
      } catch (error) {
        //ToDo
      }
    },
    error: (error) => {
      if (error.message) {
        //ToDo
      }
    }
  });
}
function reloadRpt() {
  viewer.openReport(reportParamter.reportId, reportParamter.reportParams);
}
function reloadRpt1() {
  viewer.openReport(reportParamter.reportId, null);
}
function printRpt() {
  viewer.print();
}
</script>
<style lang="scss" scoped>
#viewerContainer {
  width: 99%;
  height: calc(100vh - 50px);
}

:deep(.ar-report-viewer .gc-viewer) {
  background-color: #fafefe !important;
  width: 99.7% !important;
}

:deep(.ar-report-viewer .gc-menu__panel-container) {
  background-color: #fafefe !important;
}

:deep(.ar-report-viewer .gc-menu__btn-container) {
  background-color: #fafefe !important;
}

:deep(.ar-report-viewer .gc-btn--accent) {
  background-color: rgba(0, 0, 0, 0.1) !important;
  color: #205f78 !important;
}

:deep(.ar-report-viewer .gcv-pageview--margin > *) {
  margin: 0 !important;
}
</style>
